<template>
  <el-radio-group
    v-bind="attrs"
    :model-value="modelValue"
    @change="handleChange"
  >
    <component
      :is="componentName"
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-radio-group>
</template>

<script setup>
import { ElRadio, ElRadioButton } from 'element-plus'

const modelValue = defineModel({
  type: [String, Number, Boolean],
  default: null,
})
const emit = defineEmits(['change'])
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})

const attrs = useAttrs()

const componentMap = {
  radio: ElRadio,
  'radio-button': ElRadioButton,
}

const componentName = computed(() => componentMap[attrs?.component] || ElRadio)

function handleChange(value) {
  modelValue.value = value
  emit('change', value)
}
</script>
